<template>
  <div class="tab_wrap">
    <div class="btn_wrap">
      <el-button type="primary" @click="toSaveTemp">下载导入模版</el-button>
      <el-button type="primary" @click="toinfo">添加员工</el-button>
      <el-button type="primary" @click="importFlag=true">excel导入</el-button>
      <el-button type="primary" @click="exportExcel">excel导出</el-button>
    </div>
    <div>
      <el-table :data="userList">
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div>
              <img v-if="scope.row.staffPhoto" :src="scope.row.staffPhoto" alt="">
              <div v-else class="nameImg">{{ scope.row.username.substr(0,1) }}</div>
            </div>
          </template>

        </el-table-column>
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式">
          <template slot-scope="scope">
            <div>
              {{ scope.row.formOfEmployment==1?'正式':'实习' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="toPerinfo(scope.row.id)">查看</el-link>
              <el-link type="primary" style="margin:0 10px;" @click="roleSel(scope.row.id)">角色</el-link>
              <el-link type="primary">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn_wrap">
        <el-pagination
          :total="total"
          :page-size="10"

          :page-sizes="[5, 10, 15]"
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-dialog title="分配角色" width="50%" :visible.sync="roleFlag">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :value="item.id" :label="item.name" />

      </el-checkbox-group>
      <div class="btn">
        <el-button type="primary" @click="toRole">确定</el-button>
        <el-button @click="roleFlag=false">取消</el-button>
      </div>

    </el-dialog>

    <!-- 上传excel的弹出层 -->

    <el-dialog title="员工导入" width="25%" :visible.sync="importFlag">
      <div style="display: flex; justify-content: center;align-items: center;">
        <el-upload
          class="upload-demo"
          drag
          accept=".xlsx,.xls"
          multiple
          :auto-upload="false"
          action="/sys/user/import"
          :show-file-list="false"
          :on-change="getFile"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">选择excel文件上传</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonApi, getRoleList, toRoleApi, importUser, getExportTemplate, importEmployee, exportEmployee } from '@/api/personnel'
import * as XLSX from 'xlsx' // excel导入 导出
import fileSaver from 'file-saver'
export default {
  name: 'VueHrimPersonList',

  data() {
    return {
      importFlag: false, // 导入员工的弹出层
      rolePersonId: '', // 正在分配角色的人员id
      roleList: [], // 角色列表
      roleFlag: false,
      checkList: [], // 角色数据
      page: 1,
      pagesize: 10,
      departmentId: 1, // 部门id
      keyword: '', // 搜索条件
      total: 0,
      userList: []// 员工列表
    }
  },
  computed: {
    roleIds() { // 处理checkbox 选择角色名称 转换为 ids
      const arr = []
      this.roleList.forEach(item => { // ["文员","薪资专员"].includes()
        if (this.checkList.includes(item.name)) {
          arr.push(item.id)
        }
      })
      return arr
    }
  },

  mounted() {

  },
  created() {
    this.getRole()
    this.getList()
    // 监听兄弟组件传来的 搜索条件
    this.$bus.$on('sendkeyword', (keyword) => {
      this.keyword = keyword
      this.getList()
    })
    // 监听兄弟组件传来的部门id  重新获取列表
    this.$bus.$on('sendid', (id) => {
      this.departmentId = id
      this.getList()
    })
  },
  methods: {
    async exportExcel() { // excel 导出接口
      // const res = await exportEmployee()
      // console.log(res, '导出的流文件')
      // fileSaver.saveAs(res, '员工列表.xlsx')
      const worksheet = XLSX.utils.json_to_sheet(this.userList) // 将列表数据转为excel的内容
      const workbook = XLSX.utils.book_new()// 创建一个新的工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      XLSX.writeFile(workbook, '员工列表.xlsx') // 导出文件
    },
    async  toSaveTemp() { // 下载员工 excel模版接口
      const res = await getExportTemplate()
      console.log(res, '666666666666666666666')
      fileSaver.saveAs(res, '员工信息模版.xlsx')
    },
    async getFile(e) { // 上传插件 获取到文件数据包  同xlsx 插件 处理数据
      console.log(e, '4444444444444444444444444') // 文件数据包
      // 1. 通过上传接口 将excel文件上传给后端

      // 都是把文件数据包放到formdata对象里面去
      const formdata = new FormData()
      // formdata.append(key, 文件数据包)
      formdata.append('file', e.raw) // e.raw elementui插件的文件数据包 原生js的文件数据e.target.files[0]

      const res = await importUser(formdata)
      console.log(res, '@@@@@@@@@@@@@@@@@@@@@')
      this.$message.success('员工导入成功')
      this.importFlag = false
      // 2.使用xlsx 插件 将excel的数据 处理出来
      // 通过导入员工接口发送数据
      // const file = e.raw// 文件数据包
      // const reader = new FileReader() // 原生js 读取文件流  base64图片

      // reader.onload = (e) => {
      //   const data = new Uint8Array(e.target.result) // e.target.result 读取到的文件流数据

      //   const workbook = XLSX.read(data, { type: 'array' }) // 使用xlsx 插件读取文件数据
      //   console.log(workbook, '******************')
      //   const firstSheetName = workbook.SheetNames[0] // 获取excel 当前表名
      //   const worksheet = workbook.Sheets[firstSheetName]

      //   const jsonData = XLSX.utils.sheet_to_json(worksheet) // 将表格数据 设置为json
      //   console.log(jsonData, '##################')
      //   // jsonData.shift()// [{name:"",username:"",phone:""}]

      //   const userRelations = {
      //     '入职日期': 'timeOfEntry',
      //     '手机号': 'mobile',
      //     '姓名': 'username',
      //     '转正日期': 'correctionTime',
      //     '工号': 'workNumber',
      //     '部门': 'departmentName',
      //     '聘用形式': 'formOfEmployment'
      //   }
      //   // results是中文形式的
      //   const newArr = jsonData.map(item => {
      //   // 遍历item中的每一项
      //     var userInfo = {}
      //     Object.keys(item).map(key => {
      //     // key是中文的key  userRelations[key]是英文的
      //     // 判断是否是日期
      //       if (userRelations[key] === 'timeOfEntry1' || userRelations[key] === 'correctionTime1') {
      //       //  说明此时到了要转化日期 只要日期类型才需要转化
      //       // java后端接口 要求 如果日期类型 必须传date类型
      //         userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/'))
      //       } else {
      //         userInfo[userRelations[key]] = item[key]
      //       }
      //     })
      //     return userInfo
      //   })
      //   console.log(newArr, '-----------------')

      // importEmployee(newArr).then(res => {
      //   console.log(res, '----导入员工')
      // })
      // }
      // reader.readAsArrayBuffer(file)
    },
    // excel中的时间不是一个标准时间 需要一个转化方法
    // format是一个分隔符 - /
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() + ''
      if (format && format.length === 1) {
        return year + format + month + format + date
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    },
    roleSel(id) { // 点击角色按钮打开弹出层 存储  人员id
      this.roleFlag = true
      this.rolePersonId = id // 人员id
    },
    async toRole() { // 确定分配权限接口
      console.log(this.roleIds, '777777777777') // 角色ids
      const res = await toRoleApi({
        id: this.rolePersonId, // 人员id
        roleIds: this.roleIds// 角色ids
      })
      console.log(res, '$4444444444444444444444')
      this.$message.success('分配角色成功')
      this.roleFlag = false
      this.checkList = []
      this.rolePersonId = []
    },
    // 获取角色列表接口
    async getRole() {
      const res = await getRoleList()
      console.log(res, '----------')
      this.roleList = res
    },
    toPerinfo(id) { // 跳转员工详情 并传送id
      this.$router.push(`/personnel/perinfo/${id}`)
    },
    toinfo() { // 点击添加员工
      this.$router.push(`/personnel/perinfo`)
    },
    handleSizeChange(val) { // 分页每页条数改变
      this.pagesize = val
      this.getList()
    },
    pageChange(val) { // 分页改变事件
      // val--当前页码
      this.page = val
      this.getList()
    },
    async getList() { // 获取员工列表接口
      const res = await getPersonApi({
        page: this.page,
        pagesize: this.pagesize,
        departmentId: this.departmentId, // 部门id
        keyword: this.keyword // 关键字
      })
      console.log(res)
      this.userList = res.rows
      this.total = res.total
    }
  }
}
</script>
<style lang="scss" scoped>
.tab_wrap{
  padding: 40px;
   box-sizing: border-box;
}
  .btn_wrap{
    display: flex;
    justify-content: flex-end;
    margin: 20px;

  }
  .el-table img{
      width: 40px;
      height:40px;
      border-radius: 50%;
  }
  .nameImg{
      width: 40px;
      height:40px;
      border-radius: 50%;
      background: rgb(4,201,190);
      text-align: center;
      line-height: 40px;
      color: white;
  }
  .btn{
    margin-top:20px;
    display: flex;
    justify-content: center;
  }
</style>
